<template>
  <div class="video-modal">
    <el-dialog
      :visible.sync="videoVisible"
      width="1200px"
      :close-on-click-modal="clickModal"
      :before-close="handleClose">
      <div class="video-box">
        <my-video :videoUrl="videoOptions.videoUrl" :state="videoOptions.state"></my-video>
      </div>
    </el-dialog>
  </div>
  <!-- videoUrl: String,
      state: Boolean-->
</template>

<script>
import myVideo from 'comp/myVideo'
export default {
  name: "video-modal",
  props: {
    videoVisible: {
      type: Boolean,
      default: false
    },
    videoOptions: {
      type: Object
    }
  },
  components: {
    myVideo
  },
  data ()　{
    return {
      clickModal: false
    }
  },
  methods: {
    handleClose () {
      this.$emit('cancelVideoModal')
    }
  }
}
</script>

<style lang="less">
.video-modal{
  .el-dialog{
    background: #fff0!important;
    border: none!important;
    box-shadow: none!important;
    .el-dialog__close{
      font-size: 30px!important;
      vertical-align: -40px!important;
      color: #fff;
    }
    .el-dialog__body{
      padding: 0px!important;
      background: #000000b0;
      margin-right: 70px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
  }
  .video-box{
    width: 1066px;
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    video{
      height: 100%;
    }
  }
}
</style>
